<template>
  <div style="width: 33.333%">
    <div class="container">数据分析</div>
    <div>
      <div id="charts_4" style="height: 400px; width: 100%"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { ref, nextTick, onMounted } from 'vue'
let myChart = ref(<any>{})
onMounted(() => {
  const chartDom = document.getElementById('charts_4')
  myChart = echarts.init(chartDom)
})
const option = {
  color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
  legend: {},
  radar: [
    {
      indicator: [
        { text: 'Indicator1' },
        { text: 'Indicator2' },
        { text: 'Indicator3' },
        { text: 'Indicator4' },
        { text: 'Indicator5' },
      ],
      center: ['50%', '50%'],
      radius: 120,
      startAngle: 190,
      splitNumber: 4,
      shape: 'circle',
      axisName: {
        formatter: '【{value}】',
        color: '#428BD4',
      },
      splitArea: {
        areaStyle: {
          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10,
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)',
        },
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)',
        },
      },
    },
  ],
  series: [
    {
      type: 'radar',
      emphasis: {
        lineStyle: {
          width: 14,
        },
      },
      data: [
        {
          value: [100, 8, 0.4, 80, 2000],
          name: 'Data A',
        },
        {
          value: [60, 5, 0.3, 100, 1500],
          name: 'Data B',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.6)',
          },
        },
      ],
    },
  ],
}

nextTick(() => {
  option && myChart.setOption(option)
})
</script>

<style lang="scss" scoped></style>
